<template>
  <!-- 加载动画 -->
  <view class="loading-container" v-if="!sellOrderDetail.productVo.productName">
    <view class="loading-spinner">
      <view class="loading-bounce"></view>
    </view>
    <text class="loading-text">加载中...</text>
  </view>

  <view v-else class="content">

    <!-- 商品信息 -->
    <view class="goods-card">
      <album width="160rpx" ref="albumRef" style="width: fit-content;" height="160rpx"
             :showExtraImages="false"
             :images="sellOrderDetail.images"
             :maxCount="1" :previewEnabled="false"
             class="goods-image"></album>
      <view class="goods-info">
        <text class="title clamp">{{ sellOrderDetail.productVo.productName }}</text>
        <text class="specs">{{ sellOrderDetail.specificationVo.specName }}</text>
        <view class="price-quantity">
          <text class="price">
            <text class="symbol">¥</text>
            {{ Number(sellOrderDetail.unitPrice) * Number(sellOrderDetail.quantity) }}
          </text>
          <text class="quantity">x{{ Number(sellOrderDetail.quantity).toFixed(0) }}</text>
        </view>
      </view>
    </view>

    <!-- 售后信息表单 -->
    <view class="form-section">
      <!-- 售后类型 -->
      <view class="form-item">
        <view class="label-wrapper">
          <text class="label">售后类型</text>
          <text class="required">*</text>
        </view>
        <view class="radio-group">
          <up-radio-group v-model="form.type" placement="row">
            <up-radio shape="circle" activeColor="#e84d1c" label="换货" :name="0" class="radio-item"></up-radio>
            <up-radio shape="circle" activeColor="#e84d1c" label="退货退款" :name="1" class="radio-item"></up-radio>
            <up-radio shape="circle" activeColor="#e84d1c" label="仅退款" :name="2" class="radio-item"></up-radio>
          </up-radio-group>
        </view>
      </view>

      <!-- 申请理由 -->
      <view class="form-item">
        <view class="label-wrapper">
          <text class="label">申请理由</text>
          <text class="required">*</text>
        </view>
        <view class="textarea-wrapper">
          <up-textarea 
            v-model="form.reason" 
            placeholder="请详细描述您的问题，以便我们更好地为您服务" 
            count
            :height="160"
          />
        </view>
      </view>

      <!-- 图片凭证 -->
      <view class="form-item">
        <view class="label-wrapper">
          <text class="label">图片凭证<text class="sub-label">（最多5张）</text></text>
        </view>
        <view class="upload-wrapper">
          <view class="upload-hint">上传相关凭证可提高审核通过率</view>
          <ImageUpload 
            v-model="form.images" 
            :multiple="true" 
            :maxCount="5"
            class="image-upload"
          >
            <view class="upload-trigger">
              <up-icon name="camera-fill" size="48rpx" color="#999"></up-icon>
              <text class="upload-text">上传图片</text>
            </view>
          </ImageUpload>
        </view>
      </view>

      <!-- 换货地址 -->
      <view v-if="form.type === 0" class="form-item">
        <view class="label-wrapper">
          <text class="label">换货地址</text>
          <text class="required">*</text>
        </view>
        <navigator url="/pages/sellment/address/address?source=1" class="address-section">
          <view class="address-content" :class="{ 'no-address-content': !addressData }">
            <view v-if="addressData" class="address-info">
              <view class="contact">
                <text class="name">{{ addressData.name }}</text>
                <text class="mobile">{{ addressData.mobile }}</text>
              </view>
              <text class="address">{{ addressData.region.replace(/,/g, '') }} {{ addressData.address }}</text>
            </view>
            <view v-else class="no-address">
              <up-icon name="map" size="40rpx" color="#999" style="margin-right: 12rpx;"></up-icon>
              <text>请选择收货地址</text>
            </view>
            <up-icon name="arrow-right" size="32rpx" color="#999"></up-icon>
          </view>
        </navigator>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @click="confirm">提交申请</button>
    </view>
  </view>
</template>

<script>
import {getSellOrderDetail} from "@/api/sell/sellOrderDetail";
import {addRefund} from "@/api/sell/refund";

export default {
  data() {
    return {
      detailId: '',
      form: {
        type: null,
        reason: '',
        feedback: null,
        orderDetailId: null,
        images: null,
        status: null,
        consignee: null,
        mobile: null,
        deliveryRegion: null,
        deliveryAddress: null
      },
      addressData: null,
      sellOrderDetail: {
        images: '',
        productVo: {
          productName: ''
        },
        specificationVo: {
          specName: ''
        },
        unitPrice: 0,
        quantity: 0
      }
    }
  },
  onUnload() {
    uni.$off('addressData');
  },
  onLoad(option) {
    uni.$on('addressData', (data) => {
      this.addressData = data
      this.form.deliveryAddress = data.address
      this.form.deliveryRegion = data.region
      this.form.consignee = data.name
      this.form.mobile = data.mobile
    })

    this.detailId = option.detailId
    getSellOrderDetail(this.detailId).then(res => {
      this.sellOrderDetail = res.data
      if (this.$refs.albumRef && this.sellOrderDetail.images) {
        this.$refs.albumRef.getImageList(this.sellOrderDetail.images)
      }
    })
  },
  methods: {
    cityChange(e) {
      this.addressData.region = e.province.label + '' + e.city.label + '' + e.area.label;
    },

    //地图选择地址
    chooseLocation() {
      uni.chooseLocation({
        success: (data) => {
          this.addressData.addressName = data.name;
          this.addressData.address = data.name;
        }
      })
    },

    //提交
    confirm() {
      let data = this.form;
      if (data.type === null || data.type === '') {
        this.$modal.msgError('类型不能为空');
        return;
      }
      if (!data.reason) {
        this.$modal.msgError('原因不能为空');
        return;
      }
      if (data.type === 0 && !data.deliveryAddress) {
        this.$modal.msgError('地址不能为空');
        return;
      }

      data.orderDetailId = this.detailId
      addRefund(data).then(res => {
        uni.navigateBack({delta: 1})
        this.$modal.msgSuccess('提交成功');
      })
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
  min-height: 100vh;
}

/* 加载动画 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #fff;
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    margin-bottom: 20rpx;
    
    .loading-bounce {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(232, 77, 28, 0.6);
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      animation: bounce 2s infinite ease-in-out;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgba(232, 77, 28, 0.6);
        opacity: 0.6;
        animation: bounce 2s infinite ease-in-out;
        animation-delay: -1.0s;
      }
    }
  }
  
  .loading-text {
    color: #999;
    font-size: 28rpx;
  }
}

@keyframes bounce {
  0%, 100% { transform: scale(0); }
  50% { transform: scale(1.0); }
}

.content {
  padding: 0 0 calc(env(safe-area-inset-bottom) + 40rpx);
  position: relative;
}

/* 页面标题 */
.page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .back-btn {
    position: absolute;
    left: 20rpx;
    height: 60rpx;
    width: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .page-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

/* 商品卡片 */
.goods-card {
  margin: 20rpx 20rpx 0;
  padding: 24rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.99);
  }
  
  .goods-image {
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.08);
  }
  
  .goods-info {
    flex: 1;
    margin-left: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    
    .title {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      line-height: 1.4;
    }
    
    .specs {
      font-size: 24rpx;
      color: #999;
      padding: 6rpx 16rpx;
      background: #f5f5f5;
      border-radius: 16rpx;
      width: fit-content;
    }
    
    .price-quantity {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8rpx;
      
      .price {
        color: #e84d1c;
        font-size: 32rpx;
        font-weight: 600;
        
        .symbol {
          font-size: 24rpx;
          margin-right: 2rpx;
        }
      }
      
      .quantity {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

/* 表单区域 */
.form-section {
  margin: 20rpx 20rpx 0;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  
  .form-item {
    padding: 32rpx 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .label-wrapper {
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;
      
      .label {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        
        .sub-label {
          font-size: 24rpx;
          color: #999;
          font-weight: normal;
          margin-left: 8rpx;
        }
      }
      
      .required {
        color: #e84d1c;
        margin-left: 8rpx;
      }
    }
    
    .radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 60rpx;
      padding: 8rpx 0;
      
      .radio-item {
        flex: 0 0 auto;
        margin-right: 20rpx;
      }
    }
    
    .textarea-wrapper {
      background: #f8f8f8;
      border-radius: 16rpx;
      min-height: 240rpx;
    }
    
    .upload-wrapper {
      .upload-hint {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 16rpx;
      }
      
      .image-upload {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
      }
      
      .upload-trigger {
        width: 160rpx;
        height: 160rpx;
        background: #f8f8f8;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12rpx;
        transition: all 0.3s;
        border: 2rpx dashed #ddd;
        
        &:active {
          background: #f0f0f0;
          transform: scale(0.98);
        }
        
        .upload-text {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

/* 地址选择 */
.address-section {
  .address-content {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    padding: 24rpx;
    border-radius: 16rpx;
    transition: all 0.3s;
    
    &:active {
      background: #f0f0f0;
      transform: scale(0.99);
    }
    
    &.no-address-content {
      padding: 32rpx 24rpx;
    }
    
    .address-info {
      flex: 1;
      margin-right: 20rpx;
      
      .contact {
        margin-bottom: 12rpx;
        
        .name {
          font-size: 28rpx;
          color: #333;
          margin-right: 20rpx;
        }
        
        .mobile {
          font-size: 28rpx;
          color: #666;
        }
      }
      
      .address {
        font-size: 26rpx;
        color: #666;
        line-height: 1.4;
      }
    }
    
    .no-address {
      flex: 1;
      font-size: 28rpx;
      color: #999;
      display: flex;
      align-items: center;
    }
  }
}

/* 提交按钮 */
.submit-section {
  margin: 40rpx 40rpx 0;
  
  .submit-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: linear-gradient(135deg, #e84d1c, #f06e44);
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 44rpx;
    box-shadow: 0 4rpx 16rpx rgba(232, 77, 28, 0.2);
    transition: all 0.3s;
    border: none;
    
    &:active {
      transform: translateY(4rpx);
      box-shadow: 0 2rpx 8rpx rgba(232, 77, 28, 0.2);
      opacity: 0.9;
    }
  }
}

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
